Cleanup: Properties Panel #7137
Conversation
📝 WalkthroughWalkthroughCentralizes panel state via workspace and right-side panel stores, reworks the canvas splitter overlay and gutter handling, types and refactors the right-side panel (editable titles, multi-node support), unifies widget expansion logic, updates related UI components and tests, and adds PropertiesAccordionItem and properties-panel tests. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TopMenu as TopMenuSection
participant Workspace as workspaceStore
participant RightStore as rightSidePanelStore
participant RightPanel as RightSidePanel
participant Graph as GraphCanvas
User->>TopMenu: click properties/properties button
TopMenu->>RightStore: openPanel('parameters') / togglePanel()
RightStore->>Workspace: update activeTab (store update)
RightStore-->>RightPanel: store change observed (activeTab/isEditingSubgraph)
RightPanel->>Workspace: read selection/nodes refs, unifiedWidth, focusMode
RightPanel-->>User: render panel (title, tabs, editable title input)
alt MiniMap gating path
Graph->>Workspace: read betaMenuEnabled
Graph-->>User: render or hide MiniMap
end
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (4)
🧰 Additional context used📓 Path-based instructions (14)src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.ts📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/components/**/*.{vue,ts,js}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
**/*.ts📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/components/**/*.vue📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,css}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/components/**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (23)📚 Learning: 2025-12-06T02:11:00.366ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-05T20:35:28.330ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-04T21:43:49.363ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
📚 Learning: 2025-12-06T00:52:35.750ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (6)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/06/2025, 02:27:42 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/06/2025, 02:36:29 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • 🟢 -265 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 975 kB (baseline 974 kB) • 🔴 +635 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 174 kB (baseline 174 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (1)
12-18: Potential reactivity issue with initialdefaultCollapsecheck.The
if (defaultCollapse)block (lines 12-14) runs once during setup. IfdefaultCollapseis initiallyfalsebut changes totruelater, the initial check won't setisCollapse. While thewatchhandles subsequent changes, the{ immediate: true }option could unify this logic and eliminate the conditional block.Consider using
immediate: truein the watcher to handle both initial and subsequent values:-if (defaultCollapse) { - isCollapse.value = true -} watch( () => defaultCollapse, - (value) => (isCollapse.value = value) + (value) => { + if (value !== undefined) { + isCollapse.value = value + } + }, + { immediate: true } )src/components/LiteGraphCanvasSplitterOverlay.vue (1)
25-26: Inconsistent use ofv-ifvsv-showfor focus mode gating.The left sidebar (line 25) and right panel (line 89) use
v-ifwhile the bottom panel (line 61) usesv-show. This inconsistency could cause subtle behavioral differences:
v-ifdestroys and recreates the component, losing internal statev-showkeeps the component mounted but hidden, preserving stateConsider unifying the approach. If state preservation matters, use
v-showconsistently:<SplitterPanel - v-if="sidebarLocation === 'left' && !focusMode" + v-show="sidebarLocation === 'left' && !focusMode"Or if DOM cleanup is preferred, use
v-iffor the bottom panel as well:<SplitterPanel - v-show="bottomPanelVisible && !focusMode" + v-if="bottomPanelVisible && !focusMode"Also applies to: 61-62, 88-90
src/components/rightSidePanel/RightSidePanel.vue (2)
86-91: Consider using store action instead of direct ref mutation.Directly mutating
activeTab.valuebypasses any centralized logic inrightSidePanelStore.openPanel(). For consistency with the tab click handler at line 142, consider using the store action here as well.watchEffect(() => { if (!tabs.value.some((tab) => tab.value === activeTab.value)) { - activeTab.value = tabs.value[0].value as 'parameters' | 'settings' | 'info' + rightSidePanelStore.openPanel(tabs.value[0].value) } })
104-124: Remove duplicate background classes from staticclassattribute.The static
classattribute (line 108) includesbg-secondary-background hover:bg-secondary-background-hoverwhich are also conditionally applied in the:classbinding (lines 111-115). This creates redundancy and confusion about which classes are active. Keep only the dynamic:classbinding for conditional background styling.<IconButton v-if="isSubgraphNode" type="transparent" size="sm" - class="bg-secondary-background hover:bg-secondary-background-hover text-base-foreground" + class="text-base-foreground" :class=" cn( 'bg-secondary-background hover:bg-secondary-background-hover', isEditingSubgraph ? 'bg-secondary-background-selected' : 'bg-secondary-background' ) "
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/components/LiteGraphCanvasSplitterOverlay.vue(8 hunks)src/components/MenuHamburger.vue(1 hunks)src/components/TopMenuSection.vue(4 hunks)src/components/graph/GraphCanvas.vue(1 hunks)src/components/graph/selectionToolbox/InfoButton.vue(2 hunks)src/components/rightSidePanel/RightSidePanel.vue(6 hunks)src/components/rightSidePanel/info/TabInfo.vue(2 hunks)src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/layout/SidePanelSearch.vue(3 hunks)src/components/rightSidePanel/parameters/SectionWidgets.vue(3 hunks)src/components/rightSidePanel/parameters/TabParameters.vue(2 hunks)src/components/rightSidePanel/settings/TabSettings.vue(8 hunks)src/locales/en/main.json(1 hunks)src/stores/workspace/rightSidePanelStore.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/stores/workspace/rightSidePanelStore.ts**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issueFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/stores/workspace/rightSidePanelStore.ts**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configurationFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/stores/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/stores/**/*.{ts,tsx}: Maintain clear public interfaces and restrict extension access in stores
Use TypeScript for type safety in state management storesFiles:
src/stores/workspace/rightSidePanelStore.ts🧠 Learnings (45)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panelsApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with DrawerApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with MessageApplied to files:
src/components/MenuHamburger.vuesrc/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventionsApplied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Organize Vue components in <template> <script> <style> orderApplied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with SelectApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patternsApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/components/TopMenuSection.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI stringsApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition APIApplied to files:
src/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`Applied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing stylesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed propertiesApplied to files:
src/components/graph/GraphCanvas.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in storesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/stores/**/*.{ts,tsx} : Use TypeScript for type safety in state management storesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `await settingStore.set('Comfy.SomeSetting', newValue)` to update settings in TypeScript/Vue filesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlersApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when neededApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{vue,html} : Never use `dark:` or `dark-theme:` Tailwind variants - instead use semantic values from `style.css` theme, e.g. `bg-node-component-surface`Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Vue 3.5 style of default prop declaration with defineProps<T>()Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use vue 3.5 style of default prop declarationApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Destructure props using Vue 3.5 style in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use watch and watchEffect for side effectsApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use setup() function for component logic in Vue 3 Composition APIApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use setup() function for component logicApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listenersApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.vue🪛 ESLint
src/components/rightSidePanel/parameters/SectionWidgets.vue
[error] 10-10: Unable to resolve path to module '../layout/PropertiesAccordionItem.vue'.
(import-x/no-unresolved)
src/components/TopMenuSection.vue
[error] 65-65: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
src/components/graph/selectionToolbox/InfoButton.vue
[error] 17-17: Unable to resolve path to module 'primevue/button'.
(import-x/no-unresolved)
[error] 19-19: Unable to resolve path to module '@/platform/telemetry'.
(import-x/no-unresolved)
[error] 20-20: Unable to resolve path to module '@/stores/workspace/rightSidePanelStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/settings/TabSettings.vue
[error] 81-81: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/stores/workspace/rightSidePanelStore.ts
[error] 2-2: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/components/LiteGraphCanvasSplitterOverlay.vue
[error] 102-102: Unable to resolve path to module '@comfyorg/tailwind-utils'.
(import-x/no-unresolved)
[error] 103-103: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
[error] 112-112: Unable to resolve path to module '@/stores/workspaceStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/layout/SidePanelSearch.vue
[error] 6-6: Unable to resolve path to module '@/utils/tailwindUtil'.
(import-x/no-unresolved)
src/components/rightSidePanel/info/TabInfo.vue
[error] 2-2: Unable to resolve path to module '@vueuse/core'.
(import-x/no-unresolved)
[error] 3-3: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
[error] 5-5: Unable to resolve path to module '@/components/node/NodeHelpContent.vue'.
(import-x/no-unresolved)
[error] 7-7: Unable to resolve path to module '@/stores/nodeDefStore'.
(import-x/no-unresolved)
[error] 8-8: Unable to resolve path to module '@/stores/workspace/nodeHelpStore'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: merge-reports
🔇 Additional comments (30)
src/components/graph/GraphCanvas.vue (1)
46-49: LGTM! Minimap now independent of UI visibility.The minimap now renders based solely on readiness and its own setting, decoupling it from
showUI. This allows the minimap to remain visible in focus mode, treating it as a canvas tool rather than UI chrome. The user retains control via theComfy.Minimap.Visiblesetting.src/components/MenuHamburger.vue (1)
4-4: Confirmz-9999Tailwind utility and stacking behaviorSwitching from a custom class to pure utility classes looks good and matches the “Tailwind-only, no custom CSS” guideline. Please double-check that
z-9999is actually defined in your Tailwind/theme config (or intentionally mapped) and that this z-index fits the global overlay stacking order so the hamburger neither hides under nor unintentionally sits above other high-priority overlays.As per coding guidelines, using Tailwind utilities instead of custom CSS is preferred.
src/components/rightSidePanel/layout/SidePanelSearch.vue (5)
25-25: LGTM!Using
toRef(props, 'updateKey')is cleaner and more idiomatic than the previous conditional function handling approach.
27-44: LGTM!The watcher implementation correctly handles cleanup to prevent memory leaks, and the
voidoperator properly addresses the floating promise. Thefinallyblock ensuresisQueryingis reset even if thesearcherfunction throws.
47-74: LGTM!Template changes follow coding guidelines:
- Uses semantic design tokens (e.g.,
bg-secondary-background) withoutdark:variants- Uses
cn()utility for class merging- Implements i18n for the placeholder text
- Dynamic icon rendering provides good visual feedback during search
19-21: Verify performance impact of reduced debounce timing.The debounce delay was reduced from 700ms to 100ms (a 7x reduction). While this improves responsiveness, it may cause significantly more frequent calls to the
searcherfunction. Ifsearcherperforms network requests or expensive operations, this could impact performance or overload the backend.Consider testing the impact with rapid typing, or adjust the debounce value based on the cost of the
searcheroperation. Alternatively, implement request cancellation in thesearcherfunction to handle rapid successive calls efficiently.
8-14: Props refactoring follows Vue 3.5 style.The change from
withDefaultsto direct destructuring with inline defaults is clean and follows the coding guidelines. TheupdateKeytype change toMaybeRefOrGetter<unknown>is more flexible and idiomatic. Existing usages are compatible:TabParameters.vuepasses aComputedRefwhich is fully supported byMaybeRefOrGetter, andSubgraphEditor.vuerelies on the default value. The component correctly usestoRefto convert the prop to a reactive reference, enabling proper reactivity in the watcher.src/components/rightSidePanel/settings/TabSettings.vue (2)
128-136: LGTM - isPinned multi-node logic is sound.The getter using
some()(any pinned → true) and setter applying to all nodes provides intuitive multi-select behavior. The asymmetry is appropriate for bulk operations.
175-209: LGTM - nodeColor multi-node handling is well-implemented.Good defensive check for empty array on line 177, and clean use of
falseas sentinel value to distinguish "mixed colors" from "no color". The iteration in the setter correctly applies to all nodes.src/locales/en/main.json (2)
2255-2268: LGTM - Locale updates follow vue-i18n conventions.The pluralization syntax using pipe separators is correct for vue-i18n's
$twith count parameter. The three forms handle zero, singular, and plural cases appropriately.
2258-2258: Removed locale keys are safely unused.Verification confirms that the removed keys (
multipleSelection,nodeType,nodeId,description,properties,settings) fromrightSidePanelare not referenced anywhere in the codebase. The removal is safe and will not cause runtime translation failures.src/components/graph/selectionToolbox/InfoButton.vue (1)
20-31: LGTM - Clean migration to store-based panel management.The refactor from
useSelectionState().toggleHelp()torightSidePanelStore.openPanel('info')properly centralizes panel state in the Pinia store, aligning with the PR's architecture changes.src/components/rightSidePanel/parameters/SectionWidgets.vue (1)
10-10: LGTM - Component wrapper updated to PropertiesAccordionItem.The swap from
RightPanelSectiontoPropertiesAccordionItemmaintains the same slot interface (#labeland default content). This aligns with the broader panel layout refactoring in this PR.Also applies to: 37-37, 69-69
src/components/rightSidePanel/parameters/TabParameters.vue (3)
10-12: Props destructuring note.Destructuring
nodesfromdefinePropsworks correctly here sincenodesis an array (reference type). The component will react to changes in the array reference passed by the parent. However, if the parent mutates the array in-place rather than replacing it, the computed properties won't re-trigger.
20-31: LGTM - Data structure refactoring is clean.The nested structure
{ node, widgets: [...] }improves data organization for multi-node support. The destructuring with defaultwidgets = []handles nodes without widgets gracefully.
73-83: LGTM - Section rendering with conditional collapse.The
defaultCollapselogic using reference equality (===) is intentional - when the search query is empty,searchedWidgetsSectionDataListis assigned the same reference aswidgetsSectionDataList(line 42), making them equal. This ensures sections are collapsed by default only when there are multiple nodes and no active search filter.src/components/TopMenuSection.vue (1)
65-65: LGTM! Clean store integration withstoreToRefs.Using
storeToRefsto destructure reactive state from the Pinia store is the correct pattern for maintaining reactivity. The direct invocation ofrightSidePanelStore.togglePanel(line 51) is cleaner than the previous local wrapper function.Also applies to: 98-98
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (1)
39-43: LGTM! Chevron icon and rotation changes.The switch from
chevron-downwithrotate-90tochevron-upwith-rotate-180provides the same visual behavior with cleaner semantics. Usingcn()for class merging follows the coding guidelines.src/components/rightSidePanel/info/TabInfo.vue (2)
23-29: Good use ofwheneverfrom VueUse.Replacing
watchwithwheneveris a cleaner pattern when you only want to react to truthy values. This aligns with the coding guideline to leverage VueUse composables.
10-13: The parent component (RightSidePanel.vue) guarantees a non-emptynodesarray before renderingTabInfo. The 'info' tab is only added to the available tabs whenisSingleNodeSelectedistrue(lines 74-82), which meansselectedNodes.length === 1. Combined with thewatchEffectvalidation (lines 87-90) that ensures the active tab is always in the valid tabs list, accessingnodes[0]is safe. The template'sv-if="nodeInfo"guard (line 33 of TabInfo.vue) provides additional defensive coverage. No change is needed.Likely an incorrect or invalid review comment.
src/stores/workspace/rightSidePanelStore.ts (3)
4-4: Good addition of typed tab union.Exporting
RightSidePanelTabtype provides type safety for components that need to reference tab values, aligning with the guideline to maintain clear public interfaces in stores.
13-13: Clean refactor: derivingisEditingSubgraphfromactiveTab.Computing
isEditingSubgraphfromactiveTabinstead of maintaining separate state is the right approach - it follows the principle of deriving state rather than duplicating it, reducing the risk of state synchronization bugs.
15-20: SimplifiedopenPanelfunction.The simplified signature
openPanel(tab?: RightSidePanelTab)with direct tab assignment is cleaner than the previous subgraph-specific branching logic. The optional parameter provides flexibility while keeping the API minimal.src/components/LiteGraphCanvasSplitterOverlay.vue (3)
48-53: Good use ofcn()for conditional class merging.Using
cn()from@comfyorg/tailwind-utilsfor merging classes with the conditionalhiddenclass follows the coding guideline to never use:class="[]"for class merging.
126-132: Clean store integration withstoreToRefs.Good use of
storeToRefsto destructure reactive state from multiple stores while maintaining reactivity. The renamed destructuring (isOpen: rightSidePanelVisible) provides clearer naming in the component context.
134-139: SimplifiedsidebarStateKeylogic.The refactored computed property is more readable with clear ternary logic. Using nullish coalescing (
??) for the fallback to'default-sidebar'is appropriate.src/components/rightSidePanel/RightSidePanel.vue (4)
1-27: LGTM!Imports are well-organized, store refs are properly destructured using
storeToRefs, and the type import forRightSidePanelTabis correctly separated from the runtime import.
29-52: LGTM!The computed property chain is well-structured. The
instanceof SubgraphNodecheck at line 36 is safe even whenselectedNode.valueis null (returnsfalse), and the panel title correctly falls back to an i18n key with a count for multi-selection scenarios.
58-84: LGTM!The typed tab list and the computed logic for conditionally including the info tab are well-structured. Using arrow functions for labels ensures i18n translations remain reactive.
158-181: LGTM!The content rendering logic correctly handles the three states: no selection, subgraph editing mode, and normal tab display. The conditional chain ensures
selectedNodeis guaranteed to be aSubgraphNodewhen passed toSubgraphEditor.
DrJKL
force-pushed
the
drjkl/cleanup/sidebar
branch
from
1b80448 to
ef73441
Compare
DrJKL
requested review from
a team,
KarryCharon,
Myestery,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:L
DrJKL
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/rightSidePanel/RightSidePanel.vue (1)
106-127: Reduce duplicated background classes on the subgraph toggle IconButtonThe first
IconButtoncurrently sets background/hover colors both statically and viacn, which is redundant. You can simplify by leaving text color static and moving all background variants into the computed classes.- <IconButton - v-if="isSubgraphNode" - type="transparent" - size="sm" - class="bg-secondary-background hover:bg-secondary-background-hover text-base-foreground" - :class=" - cn( - 'bg-secondary-background hover:bg-secondary-background-hover', - isEditingSubgraph - ? 'bg-secondary-background-selected' - : 'bg-secondary-background' - ) - " + <IconButton + v-if="isSubgraphNode" + type="transparent" + size="sm" + class="text-base-foreground" + :class=" + cn( + 'bg-secondary-background hover:bg-secondary-background-hover', + isEditingSubgraph + ? 'bg-secondary-background-selected' + : 'bg-secondary-background' + ) + "As per coding guidelines, this keeps class merging centralized through
cnwhile avoiding duplication.Also applies to: 129-137
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/graph/GraphCanvas.vue(1 hunks)src/components/rightSidePanel/RightSidePanel.vue(6 hunks)src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/settings/TabSettings.vue(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
🧰 Additional context used
📓 Path-based instructions (15)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue🧠 Learnings (14)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed propertiesApplied to files:
src/components/graph/GraphCanvas.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panelsApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing stylesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.vue🪛 ESLint
src/components/rightSidePanel/settings/TabSettings.vue
[error] 81-81: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
- GitHub Check: playwright-tests-chromium-sharded (7, 8)
- GitHub Check: playwright-tests-chromium-sharded (8, 8)
- GitHub Check: playwright-tests-chromium-sharded (6, 8)
- GitHub Check: playwright-tests-chromium-sharded (5, 8)
- GitHub Check: playwright-tests-chromium-sharded (4, 8)
- GitHub Check: playwright-tests-chromium-sharded (2, 8)
- GitHub Check: playwright-tests-chromium-sharded (3, 8)
- GitHub Check: playwright-tests-chromium-sharded (1, 8)
- GitHub Check: playwright-tests (mobile-chrome)
- GitHub Check: playwright-tests (chromium-2x)
🔇 Additional comments (5)
src/components/graph/GraphCanvas.vue (1)
45-49: MiniMap now shows even in focus mode — confirm UX intentSwitching the
MiniMapcondition tocomfyAppReady && minimapEnabled && betaMenuEnabledmeans it will still render whenfocusModeis active (since it no longer depends onshowUI), as long as the minimap and new menu are enabled. This seems reasonable to keep navigation available while panels are hidden, but please confirm that the desired behavior is to show the minimap in focus mode as well.src/components/rightSidePanel/settings/TabSettings.vue (2)
2-76: Template styling updates and color picker behavior look consistentThe updated container/label styling and the color picker button classes correctly use the project’s semantic Tailwind tokens and keep hit targets and focus areas intact. No functional issues from these template changes.
93-137: Multi-node state derivation for mode, pin, and color is soundThe
nodesprop with a default empty array, plus the new computednodeState,isPinned, andnodeColorall correctly handle 0, 1, and many-node selections (including mixed-state cases) and consistently mark the canvas dirty after mutations. This addresses the earlier empty-array edge case while aligning with the multi-node UX in the rest of the right-side panel.Also applies to: 176-210
src/components/rightSidePanel/RightSidePanel.vue (2)
13-14: Typed tab model and activeTab guard correctly handle new 'subgraph' flowUsing
RightSidePanelTabplus theRightSidePanelTabListalias makes the tab config type-safe, and thetabscomputed correctly includes the info tab only when it’s actually relevant. ThewatchEffectthat falls back to the first tab whenactiveTabis invalid—but still allows'subgraph'when on a subgraph node—keeps global tab state coherent with the current selection and edit mode.Also applies to: 31-52, 58-85, 86-94
98-105: Selection gating and subgraph editor routing are coherent with multi-node propsThe header + nav layout,
hasSelection-gated TabList,noSelectionmessage, and theSubgraphEditorbranch (isSubgraphNode && isEditingSubgraph) all line up with the newselectedNodesflow. Passing:nodes="selectedNodes"down toTabParameters,TabInfo, andTabSettingsensures all tabs consume the same multi-node context derived from the canvas store.Also applies to: 140-159, 162-182
github-actions
bot
removed
the
New Browser Test Expectations
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
browser_tests/tests/nodeHelp.spec.ts (2)
98-100: Update selector for consistency.This test still uses the old
.sidebar-content-containerselector, while all other tests in this file have been updated to[data-testid="properties-panel"]. This inconsistency could lead to test failures if the component structure has changed.Apply this diff to align with the selector updates in other tests:
- const helpPage = comfyPage.page.locator('.sidebar-content-container') + const helpPage = comfyPage.page.locator( + '[data-testid="properties-panel"]' + )As per coding guidelines: "Prefer specific selectors in browser tests"
127-128: Update selector for consistency.This test also uses the old
.sidebar-content-containerselector instead of the updated[data-testid="properties-panel"]. This creates inconsistency with the rest of the test suite.Apply this diff to align with the selector updates:
- const helpPage = comfyPage.page.locator('.sidebar-content-container') + const helpPage = comfyPage.page.locator( + '[data-testid="properties-panel"]' + )As per coding guidelines: "Prefer specific selectors in browser tests"
🧹 Nitpick comments (2)
src/components/rightSidePanel/RightSidePanel.vue (2)
47-52: Hardcoded string 'Node' should be internationalized.The fallback
'Node'string on line 49 should uset()for consistency with i18n requirements.const panelTitle = computed(() => { if (isSingleNodeSelected.value && selectedNode.value) { - return selectedNode.value.title || selectedNode.value.type || 'Node' + return selectedNode.value.title || selectedNode.value.type || t('g.node') } return t('rightSidePanel.title', { count: selectionCount.value }) })Ensure
g.node(or similar key) exists insrc/locales/en/main.json. As per coding guidelines, use vue-i18n for all user-facing strings.
169-169: Inconsistent i18n function usage.This line uses
$t()while the rest of the component usest()fromuseI18n(). Consider usingt()for consistency.- {{ $t('rightSidePanel.noSelection') }} + {{ t('rightSidePanel.noSelection') }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (21)
browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (2)
browser_tests/tests/nodeHelp.spec.ts(10 hunks)src/components/rightSidePanel/RightSidePanel.vue(5 hunks)
🧰 Additional context used
📓 Path-based instructions (21)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
browser_tests/tests/nodeHelp.spec.ts
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
browser_tests/tests/nodeHelp.spec.ts
browser_tests/**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Playwright E2E tests can use optional tags like
@mobileand@2xwhich are respected by the Playwright configuration
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/RightSidePanel.vue🧠 Learnings (13)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new featuresApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebaseApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to browser_tests/**/*.{test,spec}.ts : Playwright E2E tests can use optional tags like `mobile` and `2x` which are respected by the Playwright configurationApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Use Playwright fixtures for browser testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilitiesApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panelsApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.vue⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (1)
browser_tests/tests/nodeHelp.spec.ts (1)
61-63: LGTM! More stable selector.The change from
.sidebar-content-containerto[data-testid="properties-panel"]provides a more specific, stable selector that is less likely to break with DOM structure changes.As per coding guidelines: "Prefer specific selectors in browser tests"
DrJKL
force-pushed
the
drjkl/cleanup/sidebar
branch
from
f9483c9 to
50c76d9
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/rightSidePanel/RightSidePanel.vue (1)
143-149: Past review comment remains unaddressed.The redundant two-way binding with
v-modeland@update:model-valuenoted in the previous review has not been resolved. Thev-modeldirectly updatesactiveTabviastoreToRefs, while the handler also callsrightSidePanelStore.openPanel(), causing double updates.As previously suggested, remove the redundant binding:
<TabList - v-model="activeTab" + :model-value="activeTab" @update:model-value=" (newTab) => { rightSidePanelStore.openPanel(newTab as RightSidePanelTab) } " >
🧹 Nitpick comments (2)
src/components/LiteGraphCanvasSplitterOverlay.vue (1)
3-3: Review z-index value: z-999 is very high.The
z-999class places this overlay at an extremely high z-index. Ensure this doesn't conflict with other overlays, modals, or tooltips in the application. Consider using a semantic z-index value from your design system.Verify the z-index hierarchy:
#!/bin/bash # Find other high z-index values in the codebase rg -n "z-\[?\d{3,}" --type vue --type css -C 2src/components/rightSidePanel/settings/TabSettings.vue (1)
176-210: Prefer strict equality.The multi-node color aggregation logic is correct. However, line 187 uses loose equality (
==) for the null check.Apply this diff to use strict equality:
- if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) + if (colorOption === null || colorOption === undefined || (!colorOption.bgcolor && !colorOption.color))Or if checking for both null and undefined is intentional:
- if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) + if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) // intentionally checks null and undefined
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (21)
browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (15)
browser_tests/tests/nodeHelp.spec.ts(10 hunks)src/components/LiteGraphCanvasSplitterOverlay.vue(8 hunks)src/components/MenuHamburger.vue(1 hunks)src/components/TopMenuSection.vue(4 hunks)src/components/graph/GraphCanvas.vue(1 hunks)src/components/graph/selectionToolbox/InfoButton.vue(2 hunks)src/components/rightSidePanel/RightSidePanel.vue(5 hunks)src/components/rightSidePanel/info/TabInfo.vue(2 hunks)src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/layout/SidePanelSearch.vue(3 hunks)src/components/rightSidePanel/parameters/SectionWidgets.vue(3 hunks)src/components/rightSidePanel/parameters/TabParameters.vue(2 hunks)src/components/rightSidePanel/settings/TabSettings.vue(8 hunks)src/locales/en/main.json(1 hunks)src/stores/workspace/rightSidePanelStore.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- browser_tests/tests/nodeHelp.spec.ts
- src/components/graph/GraphCanvas.vue
- src/locales/en/main.json
🧰 Additional context used
📓 Path-based instructions (20)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/stores/workspace/rightSidePanelStore.ts**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issueFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/stores/workspace/rightSidePanelStore.ts**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configurationFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/stores/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/stores/**/*.{ts,tsx}: Maintain clear public interfaces and restrict extension access in stores
Use TypeScript for type safety in state management storesFiles:
src/stores/workspace/rightSidePanelStore.ts🧠 Learnings (45)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with DrawerApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with SelectApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with MessageApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,css} : Use Tailwind CSS only for styling (no custom CSS)Applied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSApplied to files:
src/components/MenuHamburger.vuesrc/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Tailwind CSS for styling Vue componentsApplied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use Tailwind CSS for stylingApplied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in storesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `await settingStore.set('Comfy.SomeSetting', newValue)` to update settings in TypeScript/Vue filesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use vue 3.5 style of default prop declarationApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Vue 3.5 style of default prop declaration with defineProps<T>()Applied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing stylesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patternsApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI stringsApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition APIApplied to files:
src/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`Applied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlersApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when neededApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{vue,html} : Never use `dark:` or `dark-theme:` Tailwind variants - instead use semantic values from `style.css` theme, e.g. `bg-node-component-surface`Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use watch and watchEffect for side effectsApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use setup() function for component logic in Vue 3 Composition APIApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use setup() function for component logicApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listenersApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Destructure props using Vue 3.5 style in Vue componentsApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Implement proper props and emits definitionsApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue🪛 ESLint
src/components/rightSidePanel/parameters/SectionWidgets.vue
[error] 10-10: Unable to resolve path to module '../layout/PropertiesAccordionItem.vue'.
(import-x/no-unresolved)
src/stores/workspace/rightSidePanelStore.ts
[error] 2-2: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/components/graph/selectionToolbox/InfoButton.vue
[error] 17-17: Unable to resolve path to module 'primevue/button'.
(import-x/no-unresolved)
[error] 19-19: Unable to resolve path to module '@/platform/telemetry'.
(import-x/no-unresolved)
[error] 20-20: Unable to resolve path to module '@/stores/workspace/rightSidePanelStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/settings/TabSettings.vue
[error] 81-81: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/components/TopMenuSection.vue
[error] 65-65: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
src/components/LiteGraphCanvasSplitterOverlay.vue
[error] 102-102: Unable to resolve path to module '@comfyorg/tailwind-utils'.
(import-x/no-unresolved)
[error] 103-103: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
[error] 112-112: Unable to resolve path to module '@/stores/workspaceStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/info/TabInfo.vue
[error] 2-2: Unable to resolve path to module '@vueuse/core'.
(import-x/no-unresolved)
[error] 3-3: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
[error] 5-5: Unable to resolve path to module '@/components/node/NodeHelpContent.vue'.
(import-x/no-unresolved)
[error] 7-7: Unable to resolve path to module '@/stores/nodeDefStore'.
(import-x/no-unresolved)
[error] 8-8: Unable to resolve path to module '@/stores/workspace/nodeHelpStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/layout/SidePanelSearch.vue
[error] 6-6: Unable to resolve path to module '@/utils/tailwindUtil'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (30)
src/components/MenuHamburger.vue (1)
2-5: Tailwind-only styling migration on container looks goodSwitching from the
.comfy-menu-hamburgerscoped style to inline Tailwind utilities on the root div (fixed z-9999 flex flex-row no-drag top-0 right-0) aligns with the “Tailwind CSS only in components, no custom CSS” guideline and avoids extra scoped rules. Just make sure the new explicitz-9999still plays nicely with other overlays/modals in the app’s stacking order, but otherwise this change looks solid.Based on learnings, this matches the project’s preference for Tailwind utilities in
src/components/**/*.vue.src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (2)
4-4: LGTM: Clean v-model pattern with defineModel.The use of
defineModelfor the collapse state is idiomatic Vue 3.5 and simplifies the component API by enabling two-way binding.
17-17: Remove this comment — no breaking change exists.The component only supports label via
<slot name="label" />and has never had a label prop. The single consumer (SectionWidgets.vue) already correctly provides labels through the slot mechanism using<template #label>. No verification needed.Likely an incorrect or invalid review comment.
src/stores/workspace/rightSidePanelStore.ts (3)
4-4: LGTM: Type-safe tab definitions.The
RightSidePanelTabunion type provides clear documentation of available tabs and enables type-safe tab navigation throughout the codebase.
15-20: Simplified API: openPanel signature is cleaner.The updated signature makes the tab parameter optional and removes the special subgraph handling. This simplification aligns well with the computed
isEditingSubgraphapproach.
13-13: No action needed. All usages ofisEditingSubgraphare read-only—it's only accessed in conditional expressions, template directives, and ternary logic within RightSidePanel.vue. No direct assignments to this computed property exist in the codebase.src/components/TopMenuSection.vue (2)
65-65: LGTM: Correct use of storeToRefs for reactive state.Using
storeToRefsproperly extracts reactive references from the store while maintaining reactivity. This is the recommended pattern for accessing Pinia store state in components.Also applies to: 98-98
51-51: LGTM: Simplified panel toggle logic.Directly calling
rightSidePanelStore.togglePanel()is cleaner than the previous approach and aligns with store-driven state management.src/components/LiteGraphCanvasSplitterOverlay.vue (4)
19-19: LGTM: Stable splitter key prevents unnecessary re-renders.Using a fixed key
"main-splitter-stable"eliminates unnecessary component re-initialization and preserves splitter state across updates.
25-25: LGTM: Consistent focusMode gating across panels.The
focusModecheck consistently hides all panels (left sidebar, bottom panel, and right panel) when focus mode is active, providing a clean canvas-only view.Also applies to: 61-61, 89-89
102-103: LGTM: Correct imports for utility functions.Importing
cnfrom@comfyorg/tailwind-utilsandstoreToRefsfrom Pinia follows the project's patterns for class name merging and reactive store access.As per coding guidelines, using
cnfor class merging is the correct approach instead of:class="[]".
49-53: Gutter visibility logic is correctly implemented.The
bottomPanelVisiblecomputed property inuseBottomPanelStore()properly derives its state fromactivePanel, which starts asnullon initial load. This ensures the gutter is hidden when no panel is active. The state transitions are handled correctly through the reactive computed property and the store's action methods (togglePanel,toggleBottomPanelTab), which safely manage all scenarios including rapid state changes. The gutter correctly applies thehiddenclass when!bottomPanelVisibleand remains visible when a panel is active.src/components/rightSidePanel/layout/SidePanelSearch.vue (3)
8-14: LGTM: Clean props destructuring with MaybeRefOrGetter.The updated prop signature using
MaybeRefOrGetter<unknown>forupdateKeyprovides better flexibility, allowing consumers to pass refs, getters, or raw values. The destructuring pattern with a default searcher is idiomatic Vue 3.5.
19-21: Verify debounce timing: 100ms is significantly faster.The debounce interval changed from 700ms to 100ms with maxWait also at 100ms. This makes the search much more responsive but could increase the frequency of searcher calls substantially.
Consider the performance implications:
- Will the searcher function handle rapid-fire calls efficiently?
- Is there rate limiting or caching on the backend if this triggers API calls?
- The
maxWait: 100means it will execute at least every 100ms during continuous typing.Would you like me to help test the performance impact of this change?
29-41: LGTM: Proper cleanup handling in watch.The watch callback correctly uses the
onCleanupparameter to handle async operation cancellation, preventing stale results from updating the UI after the search query changes.src/components/graph/selectionToolbox/InfoButton.vue (1)
20-22: LGTM: Clean migration to store-driven panel management.The refactor from
toggleHelp()torightSidePanelStore.openPanel('info')centralizes panel state management in the store, making the component simpler and the state flow more predictable.Also applies to: 31-31
src/components/rightSidePanel/parameters/SectionWidgets.vue (1)
10-10: LGTM: Clean component replacement.Replacing
RightPanelSectionwithPropertiesAccordionItemstandardizes the accordion pattern across the properties panel. The component correctly provides thelabelslot expected by the new wrapper.Also applies to: 37-37, 69-69
src/components/rightSidePanel/info/TabInfo.vue (3)
2-3: LGTM: whenever is cleaner for conditional reactivity.Using
wheneverfrom VueUse is more idiomatic thanwatchfor triggering effects when a value becomes truthy. This simplifies the logic and makes the intent clearer.Based on learnings, VueUse functions should be preferred for common reactive patterns.
Also applies to: 23-29
10-13: LGTM: Clean props destructuring.Destructuring props directly in
definePropsand computing the first node is idiomatic Vue 3.5 and improves code readability.
26-26: No validation needed—the implementation is already safely guarded.The
openHelpmethod directly assigns the parameter to state without validation, but this is not a concern because:
- The
whenever()guard in TabInfo.vue ensuresnodeInfois truthy before invokingopenHelp(). ThefromLGraphNode()method returnsComfyNodeDefImpl | null, butwhenever()only executes the callback when the source value is truthy, preventing null values from reachingopenHelp()- TypeScript enforces the
ComfyNodeDefImpltype on the received parameter, preventing shape mismatches at compile time- The
watchinnodeHelpStoresafely handles the stored value with explicit null checks (if (!node) return '') before accessing propertiesThe code is correctly defended at both the call site (truthy guard via
whenever()) and type level (TypeScript typing).src/components/rightSidePanel/parameters/TabParameters.vue (2)
10-18: LGTM! Excellent type safety improvement.The Vue 3.5 style prop destructuring and explicit type definitions for the nested widget data model improve both type safety and code clarity.
20-31: LGTM! Data model refactor maintains correct behavior.The refactored
widgetsSectionDataListuses a more explicit nested structure while preserving the existing widget filtering logic. The data flow remains correct.src/components/rightSidePanel/settings/TabSettings.vue (4)
2-2: LGTM! Styling consolidation improves consistency.The styling updates consolidate text colors using semantic theme tokens and simplify the class structure without changing functionality.
Also applies to: 5-5, 30-30, 34-34, 42-44, 71-71
81-81: LGTM! Props updated for multi-node support.The props signature correctly migrates to support multiple nodes with proper defaults. The import cleanup removes unused refs.
Note: The ESLint error flagging the 'vue' import is a false positive from the linter configuration.
Also applies to: 93-95
105-126: LGTM! Multi-node state handling is correct.The
nodeStatecomputed properly handles empty arrays, single nodes, and multiple nodes. The aggregation logic correctly returns a common mode or null, and the setter updates all nodes appropriately.
129-137: LGTM! Pinned state properly aggregates across nodes.The
isPinnedcomputed correctly returnstrueif any node is pinned, and the setter applies the value to all nodes.src/components/rightSidePanel/RightSidePanel.vue (4)
13-13: LGTM! Proper type usage and selection state derivation.The import of
RightSidePanelTabaligns with the store refactor, and the computed properties correctly derive selection state for the panel.Also applies to: 29-52
87-94: LGTM! Tab validation correctly handles subgraph editing.The
watchEffectproperly validates thatactiveTabis in the available tabs list, with special handling for the'subgraph'tab when editing subgraph nodes.
98-141: LGTM! Improved semantic structure and consistent styling.The template restructuring uses semantic HTML elements and consistent theme-based styling. The subgraph toggle button properly switches between subgraph and parameters views via the store.
164-186: LGTM! Content rendering properly handles all states.The panel content correctly renders different views based on selection state, subgraph editing mode, and active tab. All tab components properly receive
selectedNodesfor multi-node support.
DrJKL
force-pushed
the
drjkl/cleanup/sidebar
branch
from
5b4aad6 to
96e1c04
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/rightSidePanel/layout/SidePanelSearch.vue (1)
3-45: Fix reactive tracking forupdateKeyin the search watcher
const updateKeyRef = toRef(() => toValue(updateKey))does not properly track changes toupdateKey. ThetoReffunction with a getter callback doesn't reliably create a reactive reference that updates when the underlyingMaybeRefOrGetterchanges, so the watcher may not rerun whenupdateKeyis updated.Replace with
computedto ensure changes toupdateKeycorrectly retrigger the search:- import { ref, toRef, toValue, watch } from 'vue' + import { computed, ref, toValue, watch } from 'vue' ... -const updateKeyRef = toRef(() => toValue(updateKey)) +const updateKeyRef = computed(() => toValue(updateKey))This keeps the debounce and loading logic intact while ensuring the watcher properly responds to
updateKeychanges.src/components/rightSidePanel/settings/TabSettings.vue (1)
176-210: Consider consolidating the color comparison logic.The
nodeColorgetter has a complex flow withcolorOption === falsefor mixed colors andcolorOption == nullfor no-color detection. While functional, the loose equality on line 187 (colorOption == null) differs from the strict equality used elsewhere.For consistency with the rest of the file, consider using strict equality:
- if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) + if (colorOption === null || (!colorOption.bgcolor && !colorOption.color))
♻️ Duplicate comments (5)
src/renderer/extensions/vueNodes/components/NodeWidgets.vue (1)
85-88: Centralized expansion logic in NodeWidgets looks correctImporting
shouldExpandfrom the widget registry and usingshouldExpand(w.type)ingridTemplateRowscleanly delegates row sizing to a single shared predicate, keeps alias handling consistent, and removes local duplication. No issues from a typing or reactivity standpoint.Also applies to: 196-202
src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts (1)
200-208:shouldExpandimplementation is type-safe and handles aliases correctlyDefining
EXPANDING_TYPESas a typed const tuple and canonicalizing viagetCanonicalTypebeforeincludesgives a simple, type-safe expansion predicate that automatically supports aliases like'TEXTAREA','multiline','progressText', and'LOAD_3D'. This cleanly centralizes expansion behavior for all consumers. As per coding guidelines, TypeScript usage here is solid and avoidsany.browser_tests/tests/nodeHelp.spec.ts (1)
56-58: Good move to a specificproperties-panelselector; consider centralizing the locatorSwitching all help assertions to
[data-testid="properties-panel"]is an improvement over the old sidebar class and aligns with the “prefer specific selectors in browser tests” guidance. However, the same locator is now repeated across many tests in this file.To reduce duplication and keep tests resilient to future DOM refactors, consider exposing a
propertiesPanel(orhelpPanel) locator on theComfyPagefixture and using that here instead of inliningcomfyPage.page.locator('[data-testid="properties-panel"]')everywhere. This keeps the selector definition in a single place while preserving the specificity you just introduced. Based on learnings, this also matches the browser_tests guidance around using shared fixtures/utilities.Also applies to: 170-172, 202-204, 237-239, 287-289, 362-364, 404-406, 473-475, 498-500, 544-546
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (1)
16-48: Addaria-expandedfor accessibility.The collapsible button should communicate its expanded/collapsed state to assistive technologies.
<button v-tooltip="..." type="button" + :aria-expanded="!isCollapse && !isEmpty" :class="..." :disabled="isEmpty" @click="isCollapse = !isCollapse" >src/components/rightSidePanel/RightSidePanel.vue (1)
143-160: Add accessible labeling and pressed state to subgraph toggle button.The subgraph toggle button is icon-only and lacks an accessible name and pressed state. The close panel button (lines 161-170) correctly implements these attributes with
aria-pressedandaria-label.Apply this diff to add accessibility attributes:
<IconButton v-if="isSubgraphNode" type="transparent" size="sm" :class=" cn( 'bg-secondary-background hover:bg-secondary-background-hover text-base-foreground', isEditingSubgraph && 'bg-secondary-background-selected' ) " + :aria-pressed="isEditingSubgraph" + :aria-label="$t('rightSidePanel.toggleSubgraphEditing')" @click=" rightSidePanelStore.openPanel( isEditingSubgraph ? 'parameters' : 'subgraph' ) " >Then add the translation key to
src/locales/en/main.json:"rightSidePanel": { "toggleSubgraphEditing": "Toggle subgraph editing" }As per coding guidelines, all UI components must be accessible, and all strings must use vue-i18n.
Summary
Still to-do
┆Issue is synchronized with this Notion page by Unito